<template>
	<view class="error">

		<view class="card" v-if="!pageLoading">
			<view class="tabs">
				<u-tabs :list="list" :is-scroll="false" :current="curNow" @change="sectionChange"
					active-color="#36c269"></u-tabs>
			</view>

			<view class="yuan">
				<image class="yuan-bg" src="/static/icon/error-yuan.png" mode=""></image>
				<view class="con">
					<view class="num">
						<u-count-to :start-val="0" :end-val="count" bold font-size="64" color="#fff" />
					</view>
					<text class="tips">{{ curNow === 0 ? '我的错题' : '我的收藏' }}</text>
				</view>
			</view>
			<template v-if="curNow === 0">
				<view class="btns">
					<view class="btn">
						<button class="cu-btn nxt-btn down-btn" @click="handStar(2)">
							<text>查看全部错题</text>
						</button>
					</view>
					<view class="btn">
						<button class="cu-btn nxt-btn remove-btn" @click="showModal">
							<text>清空错题</text>
						</button>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="btns">
					<view class="btn">
						<button class="cu-btn nxt-btn down-btn" @click="handStar(3)">
							<text>查看全部收藏</text>
						</button>
					</view>
				</view>
			</template>
		</view>


		<view class="cu-modal" :class="modalName?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">温馨提示</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white dia-content">
					是否清空错题?
				</view>
				<view class="dia-bottom bg-white flex align-center justify-between">
					<view class="jt-btn flex align-center justify-center" @tap="hideModal">
						<view>
							取消
						</view>
					</view>
					<view class="jt-btn flex align-center justify-center" @click="handSubmit()">
						<view>
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		doErrList,
		doClearErr,
		doCollList,
		errorCount,
		collectCount
	} from '@/api/home.js'
	export default {
		data() {
			return {
				pageLoading: true,
				id: '',
				count: 0,
				modalName: false,
				list: [{
						name: '错题集'
					},
					{
						name: '收藏集'
					}
				],
				curNow: 0,
				city: '',
			}
		},
		onLoad(e) {
			this.id = e.id
			this.city = e.name
		},
		onShow() {
			this.init()
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
				this.init()
			},
			handStar(type) {
				if (type == 2) {
					if (this.count == 0) {
						uni.showToast({
							icon: 'none',
							title: '您目前没有错题哦~'
						})
						return
					}
				} else {
					if (this.count == 0) {
						uni.showToast({
							icon: 'none',
							title: '您目前没有收藏题哦~'
						})
						return
					}
				}
				uni.navigateTo({
					url: `/pages/paper/answer?id=${this.id}&type=${type}&name=${this.city}`
				})
			},
			// 收藏,错题
			async init() {
				if (this.curNow == 0) {
					const {
						data
					} = await errorCount({
						city: this.city
					})
					this.pageLoading = false
					this.count = data
				} else {
					const {
						data
					} = await collectCount({
						city: this.city
					})
					this.pageLoading = false
					this.count = data
				}
			},
			async handSubmit() {
				this.hideModal()
				const {
					code,
					msg: title
				} = await doClearErr({
					city: this.city
				})
				if (code !== 200) {
					uni.showToast({
						icon: 'none',
						title
					})
					return
				}
				uni.showToast({
					icon: 'none',
					title: '清空成功'
				})
				this.count = 0
			},
			showModal() {
				this.modalName = true
			},
			hideModal() {
				this.modalName = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.error {
		padding-top: 30rpx;

		.card {
			position: relative;
			z-index: 2;
			margin: 0 auto 0 auto;
			width: 702rpx;
			background: #FFFFFF;
			border-radius: 22rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 20rpx;
			padding-bottom: 74rpx;
			overflow: hidden;

			.tabs {
				width: 100%;
			}
			
			.yuan { 
				margin-top: 32rpx;
				width: 441.02rpx;
				height: 441.02rpx;
				position: relative;
				&-bg {
					width: 441.02rpx;
					height: 441.02rpx;
				}
				.con {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				}
				.tips {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

		

			.btns {
				margin-top: 80rpx;
			}

			.btn {
				width: 541rpx;
				margin: 40rpx auto 0 auto;


				.nxt-btn {
					width: 100%;
					height: 92rpx;
					background: #E3E3E3;
					border-radius: 20rpx;
					overflow: hidden;
					transition: height 0.25s;
				}

				.remove-btn {
					color: #36c269;
					background-color: rgba(255, 255, 255, 0);
					border: 1rpx solid #36c269;

					&::after {
						border: none;
					}
				}

				.down-btn {
					background-color: #36c269;
					color: #FFFFFF;
				}
			}
		}
	}

	.dia-content {
		height: 180rpx;
	}

	.dia-bottom {
		border-top: 1rpx solid #f2f2f2;

		.jt-btn {
			flex: 1;
			padding: 25rpx 0;

			&:first-child {
				border-right: 1rpx solid #f2f2f2;
				color: #999;
			}

			&:last-child {
				color: #36c269;
			}
		}
	}
</style>